<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="载体" prop="zt">
        <el-select
          v-model="queryParams.zt"
          placeholder="请选择载体"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in carrierList"
            :key="item.nr"
            :label="item.nr"
            :value="item.nr"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="楼层" prop="lc">
        <el-input
          v-model="queryParams.lc"
          placeholder="请输入楼层"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="zlid" label="智联器编号" align="center">
        <template #default="scope">
          <span
            style="color: #409eff; cursor: pointer"
            @click="openZlxDrawer(scope.row)"
            >{{ scope.row.zlid }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="zt" label="载体" align="center" />
      <el-table-column prop="lc" label="楼层" align="center" />
      <el-table-column prop="location" label="位置" align="center" />
      <el-table-column prop="model" label="设备类型" align="center" />
      <el-table-column prop="ptopic" label="发布地址" align="center" />
      <el-table-column prop="stopic" label="订阅地址" align="center" />
    </el-table>

    <!-- 分页（如有需要可加） -->
    <!--
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    -->

    <!-- 新增智联器对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="zlFormRef" :model="zlForm" :rules="zlRules" label-width="100px">
        <el-form-item label="载体" prop="zt">
          <el-select
            v-model="zlForm.zt"
            placeholder="请选择载体"
            @change="handleCarrierChange"
          >
            <el-option
              v-for="item in carrierList"
              :key="item.nr"
              :label="item.nr"
              :value="item.nr"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="楼层" prop="lc">
          <el-input v-model="zlForm.lc" placeholder="请输入楼层" type="number" />
        </el-form-item>
        <el-form-item label="位置" prop="location">
          <el-input v-model="zlForm.location" placeholder="请输入位置" />
        </el-form-item>
        <el-form-item label="智联器编号" prop="zlid">
          <el-input v-model="zlForm.zlid" placeholder="请输入智联器编号" />
        </el-form-item>
        <el-form-item label="设备类型" prop="model">
          <el-input v-model="zlForm.model" placeholder="请输入设备类型" />
        </el-form-item>
        <el-form-item label="发布地址" prop="ptopic">
          <el-input v-model="zlForm.ptopic" placeholder="请输入发布地址" />
        </el-form-item>
        <el-form-item label="订阅地址" prop="stopic">
          <el-input v-model="zlForm.stopic" placeholder="请输入订阅地址" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 智联器详情抽屉 -->
    <el-drawer
      v-model="zlxDrawerVisible"
      title="智联器详情"
      size="50%"
      direction="rtl"
      :before-close="handleClose"
      class="custom-drawer"
    >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border v-if="zlxInfo">
          <el-descriptions-item label="载体">{{ zlxInfo.zt }}</el-descriptions-item>
          <el-descriptions-item label="楼层">{{ zlxInfo.lc }}</el-descriptions-item>
          <el-descriptions-item label="位置">{{ zlxInfo.location }}</el-descriptions-item>
          <el-descriptions-item label="智联器编号">{{
            zlxInfo.zlid
          }}</el-descriptions-item>
          <el-descriptions-item label="发布地址">{{
            zlxInfo.ptopic
          }}</el-descriptions-item>
          <el-descriptions-item label="订阅地址">{{
            zlxInfo.stopic
          }}</el-descriptions-item>
        </el-descriptions>
        <div v-else style="color: #999; padding: 20px 0">暂无基本信息</div>
      </el-card>
      <div class="drawer-header"></div>
      <div class="card-section">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>关联信息</span>
            </div>
          </template>
          <el-table
            v-if="Array.isArray(zldbInfo) && zldbInfo.length"
            :data="zldbInfo"
            style="width: 100%"
          >
            <el-table-column prop="dbbh" label="电表编号" align="center" />
            <el-table-column prop="fjh" label="房间号" align="center" />
            <el-table-column prop="dbzt" label="电表状态" align="center" />
            <el-table-column
              prop="qymc"
              label="企业名称"
              width="240px"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column prop="zlid" label="智联器编号" align="center" />
          </el-table>
          <div v-else style="color: #999; padding: 20px 0">暂无关联信息</div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { selectAllZl, addzl, selectzt } from "@/api/carrier/ammeter";
import { selectzlx, selectzldb } from "@/api/carrier/index";

const zlFormRef = ref(); // 新增
const loading = ref(false);
const open = ref(false);
const title = ref("新增智联器");
const tableData = ref([]);
const carrierList = ref([]);
const zlxDrawerVisible = ref(false);
const zlxInfo = ref(null);
const zldbInfo = ref([]);

const queryParams = reactive({
  zt: undefined,
  lc: undefined,
});

const zlForm = reactive({
  zt: undefined,
  lc: undefined,
  location: "",
  zlid: "",
  model: "智联器",
  ptopic: "",
  stopic: "",
});
const zlRules = {
  zt: [{ required: true, message: "请选择载体", trigger: "change" }],
  lc: [{ required: true, message: "请输入楼层", trigger: "blur" }],
  location: [{ required: true, message: "请输入位置", trigger: "blur" }],
  zlid: [{ required: true, message: "请输入智联器编号", trigger: "blur" }],
  model: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
  ptopic: [{ required: true, message: "请输入发布地址", trigger: "blur" }],
  stopic: [{ required: true, message: "请输入订阅地址", trigger: "blur" }],
};

/** 查询载体列表 */
function fetchCarrierList() {
  selectzt({ lxbh: 1, pageNum: 1, pageSize: 10 }).then((res) => {
    carrierList.value = res.data.list || [];
  });
}

/** 查询智联器列表 */
function getList() {
  loading.value = true;
  selectAllZl({
    zt: queryParams.zt,
    lc: queryParams.lc,
  })
    .then((res) => {
      tableData.value = res.data || [];
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.zt = undefined;
  queryParams.lc = undefined;
  getList();
}

/** 新增按钮操作 */
function handleAdd() {
  resetForm();
  open.value = true;
  title.value = "新增智联器";
  fetchCarrierList();
}

/** 提交表单 */
function submitForm() {
  zlFormRef.value.validate((valid) => {
    if (valid) {
      addzl({ ...zlForm }).then(() => {
        open.value = false;
        getList();
      });
    }
  });
}

/** 载体选择时赋值 */
function handleCarrierChange(value) {
  zlForm.zt = value;
}

/** 重置表单 */
function resetForm() {
  zlForm.zt = undefined;
  zlForm.lc = undefined;
  zlForm.location = "";
  zlForm.zlid = "";
  zlForm.model = "智联器";
  zlForm.ptopic = "";
  zlForm.stopic = "";
}

/** 取消按钮 */
function cancel() {
  resetForm();
  open.value = false;
}

/** 打开智联器详情抽屉 */
function openZlxDrawer(row) {
  zlxDrawerVisible.value = true;
  zlxInfo.value = null;
  zldbInfo.value = null;
  // 获取基本信息
  selectzlx({ zlid: row.zlid }).then((res) => {
    if (res.code === 200 && res.data) {
      zlxInfo.value = res.data;
    } else {
      zlxInfo.value = null;
    }
  });
  // 获取关联信息
  selectzldb({ zlid: row.zlid }).then((res) => {
    if (res.code === 200 && res.data) {
      // 兼容单条和多条
      zldbInfo.value = Array.isArray(res.data) ? res.data : [res.data];
    } else {
      zldbInfo.value = [];
    }
  });
}

fetchCarrierList();
getList();
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: #324157;
    font-size: 18px;
    font-weight: bold;
    width: 100%; 
    padding: 0 20px;
    height: 30px;  
  }
.custom-drawer {
  :deep(.el-drawer__body) {
    background-color: #f4f6f8;
    padding: 20px;
  }

  

  .box-card {
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    overflow: hidden;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #324157;
  }

  .card-section {
    margin-top: 32px !important;
    padding: 20px;
  }

  :deep(.el-descriptions__label) {
    background-color: #f9fafb;
    font-weight: normal;
    color: #666;
  }

  :deep(.el-table th) {
    background-color: #f5f7fa;
  }
}
</style>
